import React, { PureComponent } from "react";
import { createContext } from "react/cjs/react.production.min";

function enhanceProps(Cmp) {
  return (props) => {
    return <Cmp {...props} region="中国"></Cmp>;
  };
}

/* 注意这样的处理方式 */
function enhanceContext(Cmp) {
  // 这个东西是props
  return (props) => {
    return (
      <UserContext.Consumer>
        {/* 这里属于是上下文咯 */}
        {(user) => {
          return <Cmp {...props} {...user}></Cmp>;
        }}
      </UserContext.Consumer>
    );
  };
}

const UserContext = createContext({
  nickname: "默认",
  level: 0,
  region: "中国",
});

class Home extends PureComponent {
  render() {
    return (
      <div>
        home:{" "}
        {`昵称: ${this.props.nickname} 等级: ${this.props.level} 地区: ${this.props.region}`}
      </div>
    );
  }
}

// 两种不同的高阶组件的使用,props 和 createContext的处理
Home = enhanceContext(Home);
Home = enhanceProps(Home);

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <h2>123</h2>
        {/* <Home nickname="xjh" level={12}></Home> */}
        <UserContext.Provider
          value={{ nickname: "xjh", level: 12, region: "巴黎" }}
        >
          <Home />
        </UserContext.Provider>
      </div>
    );
  }
}
